<template>
  <div class="account-management">
    <div class="page-header">
      <h3>账号管理</h3>
      <p>管理系统用户账号，包括创建、编辑、删除和权限分配</p>
    </div>

    <div class="search-bar">
      <el-form :model="searchForm" inline>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchForm.role" placeholder="请选择角色" clearable style="width: 150px">
            <el-option label="管理员" value="管理员" />
            <el-option label="普通用户" value="普通用户" />
            <el-option label="测试用户" value="测试用户" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
          <el-button type="primary" @click="handleCreateAccount">
            <el-icon><Plus /></el-icon>
            新建账号
          </el-button>
          <el-button type="warning" @click="handleBatchDisable" :disabled="selectedAccounts.length === 0">
            <el-icon><Lock /></el-icon>
            批量禁用
          </el-button>
          <el-button type="success" @click="handleBatchEnable" :disabled="selectedAccounts.length === 0">
            <el-icon><Unlock /></el-icon>
            批量启用
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="account-table">
      <el-table 
        :data="accountData" 
        style="width: 100%" 
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" width="150" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="role" label="角色" width="120">
          <template #default="scope">
            <el-tag :type="getRoleTagType(scope.row.role)">
              {{ scope.row.role }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="部门" width="150" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastLogin" label="最后登录" width="180" />
        <el-table-column label="操作" fixed="right" width="320">
          <template #default="scope">
            <el-button type="info" size="small" @click="handleViewDetail(scope.row)">
              详情
            </el-button>
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="info" size="small" @click="handleResetPassword(scope.row)">
              重置密码
            </el-button>
            <el-button 
              :type="scope.row.status === '正常' ? 'warning' : 'success'" 
              size="small" 
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.status === '正常' ? '禁用' : '启用' }}
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建/编辑账号对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="accountForm" :rules="accountRules" ref="accountFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="accountForm.username" placeholder="请输入用户名" :disabled="isEditMode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="accountForm.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="accountForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="accountForm.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="!isEditMode">
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="accountForm.password" 
                type="password" 
                placeholder="请输入密码" 
                show-password 
                @input="checkPasswordStrength"
              />
              <div class="password-strength" v-if="passwordStrength.level">
                <div class="strength-bar">
                  <div 
                    class="strength-fill" 
                    :class="passwordStrength.level"
                    :style="{ width: passwordStrength.width }"
                  ></div>
                </div>
                <span class="strength-text" :class="passwordStrength.level">
                  {{ passwordStrength.text }}
                </span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="accountForm.confirmPassword" type="password" placeholder="请确认密码" show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="角色" prop="role">
              <el-select v-model="accountForm.role" placeholder="请选择角色" style="width: 100%">
                <el-option label="管理员" value="管理员" />
                <el-option label="普通用户" value="普通用户" />
                <el-option label="测试用户" value="测试用户" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
              <el-select v-model="accountForm.department" placeholder="请选择部门" style="width: 100%">
                <el-option label="技术部" value="技术部" />
                <el-option label="人事部" value="人事部" />
                <el-option label="财务部" value="财务部" />
                <el-option label="市场部" value="市场部" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="accountForm.status">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="禁用">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 重置密码对话框 -->
    <el-dialog v-model="resetPasswordDialogVisible" title="重置密码" width="400px">
      <el-form :model="resetPasswordForm" :rules="resetPasswordRules" ref="resetPasswordFormRef" label-width="80px">
        <el-form-item label="用户">
          <el-input :value="resetPasswordUser?.name" disabled />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="resetPasswordForm.newPassword" 
            type="password" 
            placeholder="请输入新密码" 
            show-password 
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="resetPasswordForm.confirmPassword" 
            type="password" 
            placeholder="请确认新密码" 
            show-password 
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="resetPasswordForm.requireChange">
            下次登录时要求修改密码
          </el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleResetPasswordSubmit">确定重置</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 账号详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="账号详情" width="600px">
      <div v-if="selectedAccount" class="account-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户名">{{ selectedAccount.username }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ selectedAccount.name }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ selectedAccount.email }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ selectedAccount.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="角色">
            <el-tag :type="getRoleTagType(selectedAccount.role)">
              {{ selectedAccount.role }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="部门">{{ selectedAccount.department }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="selectedAccount.status === '正常' ? 'success' : 'danger'">
              {{ selectedAccount.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ selectedAccount.createTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="最后登录">{{ selectedAccount.lastLogin }}</el-descriptions-item>
          <el-descriptions-item label="登录次数">{{ selectedAccount.loginCount || 0 }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>权限信息</h4>
          <el-tag v-for="permission in getAccountPermissions(selectedAccount)" :key="permission" class="permission-tag">
            {{ permission }}
          </el-tag>
          <span v-if="!getAccountPermissions(selectedAccount).length" class="no-permission">暂无特殊权限</span>
        </div>

        <div class="detail-section">
          <h4>操作记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="log in getAccountLogs(selectedAccount)"
              :key="log.id"
              :timestamp="log.time"
              size="small"
            >
              {{ log.action }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleEditFromDetail">编辑账号</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Lock, Unlock } from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const dialogVisible = ref(false)
const resetPasswordDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const accountFormRef = ref()
const resetPasswordFormRef = ref()
const editingAccount = ref(null)
const resetPasswordUser = ref(null)
const selectedAccounts = ref([])
const selectedAccount = ref(null)
const passwordStrength = ref({
  level: '',
  width: '0%',
  text: ''
})

// 搜索表单
const searchForm = reactive({
  username: '',
  role: ''
})

// 账号表单
const accountForm = reactive({
  username: '',
  name: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  role: '',
  department: '',
  status: '正常'
})

// 重置密码表单
const resetPasswordForm = reactive({
  newPassword: '',
  confirmPassword: '',
  requireChange: false
})

// 表单验证规则
const accountRules = computed(() => {
  const baseRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    role: [
      { required: true, message: '请选择角色', trigger: 'change' }
    ],
    department: [
      { required: true, message: '请选择部门', trigger: 'change' }
    ]
  }

  if (!isEditMode.value) {
    baseRules.password = [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ]
    baseRules.confirmPassword = [
      { required: true, message: '请确认密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value !== accountForm.password) {
            callback(new Error('两次输入的密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }

  return baseRules
})

// 重置密码验证规则
const resetPasswordRules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    { 
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,}$/,
      message: '密码必须包含大小写字母和数字',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetPasswordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 计算属性
const dialogTitle = computed(() => {
  return editingAccount.value ? '编辑账号' : '新建账号'
})

const isEditMode = computed(() => {
  return !!editingAccount.value
})

// 账号数据
const accountData = ref([
  {
    id: 1,
    username: 'admin',
    name: '系统管理员',
    email: 'admin@example.com',
    phone: '13800138000',
    role: '管理员',
    department: '技术部',
    status: '正常',
    lastLogin: '2024-08-13 10:30:00',
    createTime: '2023-01-01 00:00:00'
  },
  {
    id: 2,
    username: 'zhangsan',
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138001',
    role: '普通用户',
    department: '技术部',
    status: '正常',
    lastLogin: '2024-08-12 15:20:00',
    createTime: '2023-06-15 09:30:00'
  },
  {
    id: 3,
    username: 'lisi',
    name: '李四',
    email: 'lisi@example.com',
    phone: '13800138002',
    role: '普通用户',
    department: '人事部',
    status: '禁用',
    lastLogin: '2024-08-10 09:15:00',
    createTime: '2023-08-20 14:45:00'
  },
  {
    id: 4,
    username: 'wangwu',
    name: '王五',
    email: 'wangwu@example.com',
    phone: '13800138003',
    role: '测试用户',
    department: '技术部',
    status: '正常',
    lastLogin: '2024-08-13 14:45:00',
    createTime: '2024-01-10 11:20:00'
  },
  {
    id: 5,
    username: 'zhaoliu',
    name: '赵六',
    email: 'zhaoliu@example.com',
    phone: '13800138004',
    role: '普通用户',
    department: '财务部',
    status: '正常',
    lastLogin: '2024-08-11 08:30:00',
    createTime: '2024-03-05 16:15:00'
  }
])

// 方法
const getRoleTagType = (role) => {
  const typeMap = {
    '管理员': 'danger',
    '普通用户': 'primary',
    '测试用户': 'warning'
  }
  return typeMap[role] || 'info'
}

const handleSearch = () => {
  loading.value = true
  // 模拟搜索
  setTimeout(() => {
    ElMessage.success('搜索完成')
    loading.value = false
  }, 1000)
}

const handleReset = () => {
  searchForm.username = ''
  searchForm.role = ''
  handleSearch()
}

const handleCreateAccount = () => {
  editingAccount.value = null
  dialogVisible.value = true
  Object.assign(accountForm, {
    username: '',
    name: '',
    email: '',
    phone: '',
    password: '',
    confirmPassword: '',
    role: '',
    department: '',
    status: '正常'
  })
}

const handleEdit = (row) => {
  editingAccount.value = row
  dialogVisible.value = true
  Object.assign(accountForm, {
    username: row.username,
    name: row.name,
    email: row.email,
    phone: row.phone,
    password: '',
    confirmPassword: '',
    role: row.role,
    department: row.department,
    status: row.status
  })
}

const handleResetPassword = (row) => {
  resetPasswordUser.value = row
  resetPasswordDialogVisible.value = true
  Object.assign(resetPasswordForm, {
    newPassword: '',
    confirmPassword: '',
    requireChange: false
  })
}

const handleResetPasswordSubmit = async () => {
  try {
    await resetPasswordFormRef.value.validate()
    
    // 模拟重置密码API调用
    console.log('重置密码:', {
      userId: resetPasswordUser.value.id,
      newPassword: resetPasswordForm.newPassword,
      requireChange: resetPasswordForm.requireChange
    })
    
    ElMessage.success(`用户"${resetPasswordUser.value.name}"的密码重置成功`)
    resetPasswordDialogVisible.value = false
    
    // 如果设置了下次登录修改密码，更新用户状态
    if (resetPasswordForm.requireChange) {
      const index = accountData.value.findIndex(item => item.id === resetPasswordUser.value.id)
      if (index > -1) {
        accountData.value[index].needChangePassword = true
      }
    }
  } catch (error) {
    console.error('重置密码失败:', error)
  }
}

const handleToggleStatus = async (row) => {
  const newStatus = row.status === '正常' ? '禁用' : '正常'
  const action = newStatus === '正常' ? '启用' : '禁用'
  
  try {
    await ElMessageBox.confirm(
      `确定要${action}用户"${row.name}"吗？${action === '禁用' ? '禁用后该用户将无法登录系统。' : '启用后该用户可正常使用系统。'}`,
      `确认${action}`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
    )
    
    // 模拟API调用
    console.log(`${action}用户:`, row.id)
    
    row.status = newStatus
    ElMessage.success(`用户"${row.name}"${action}成功`)
    
    // 记录操作日志
    console.log(`操作日志: ${action}用户 ${row.username}(${row.name})`)
  } catch {
    // 用户取消
  }
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户"${row.name}"吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = accountData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      accountData.value.splice(index, 1)
      pagination.total--
      ElMessage.success(`用户"${row.name}"删除成功`)
      
      // 记录操作日志
      console.log(`操作日志: 删除用户 ${row.username}(${row.name})`)
    }
  } catch {
    // 用户取消删除
  }
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedAccounts.value = selection
}

// 批量禁用
const handleBatchDisable = async () => {
  if (selectedAccounts.value.length === 0) return
  
  try {
    await ElMessageBox.confirm(
      `确定要禁用所选的 ${selectedAccounts.value.length} 个用户吗？禁用后这些用户将无法登录系统。`,
      '确认批量禁用',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    let successCount = 0
    selectedAccounts.value.forEach(account => {
      if (account.status === '正常') {
        account.status = '禁用'
        successCount++
        console.log(`操作日志: 批量禁用用户 ${account.username}(${account.name})`)
      }
    })
    
    ElMessage.success(`成功禁用 ${successCount} 个用户`)
    selectedAccounts.value = []
  } catch {
    // 用户取消
  }
}

// 批量启用
const handleBatchEnable = async () => {
  if (selectedAccounts.value.length === 0) return
  
  try {
    await ElMessageBox.confirm(
      `确定要启用所选的 ${selectedAccounts.value.length} 个用户吗？启用后这些用户可正常使用系统。`,
      '确认批量启用',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    let successCount = 0
    selectedAccounts.value.forEach(account => {
      if (account.status === '禁用') {
        account.status = '正常'
        successCount++
        console.log(`操作日志: 批量启用用户 ${account.username}(${account.name})`)
      }
    })
    
    ElMessage.success(`成功启用 ${successCount} 个用户`)
    selectedAccounts.value = []
  } catch {
    // 用户取消
  }
}

// 检查密码强度
const checkPasswordStrength = (password) => {
  if (!password) {
    passwordStrength.value = { level: '', width: '0%', text: '' }
    return
  }
  
  let score = 0
  let feedback = []
  
  // 长度检查
  if (password.length >= 8) score += 25
  else feedback.push('至少8位')
  
  // 包含小写字母
  if (/[a-z]/.test(password)) score += 25
  else feedback.push('包含小写字母')
  
  // 包含大写字母
  if (/[A-Z]/.test(password)) score += 25
  else feedback.push('包含大写字母')
  
  // 包含数字
  if (/\d/.test(password)) score += 25
  else feedback.push('包含数字')
  
  // 包含特殊字符
  if (/[^a-zA-Z0-9]/.test(password)) score += 10
  
  let level, text, width
  if (score < 50) {
    level = 'weak'
    text = '弱' + (feedback.length ? ' (建议: ' + feedback.join('、') + ')' : '')
    width = '25%'
  } else if (score < 75) {
    level = 'medium'
    text = '中等'
    width = '50%'
  } else if (score < 100) {
    level = 'strong'
    text = '强'
    width = '75%'
  } else {
    level = 'very-strong'
    text = '很强'
    width = '100%'
  }
  
  passwordStrength.value = { level, width, text }
}

// 查看账号详情
const handleViewDetail = (row) => {
  selectedAccount.value = row
  detailDialogVisible.value = true
}

// 从详情页面编辑
const handleEditFromDetail = () => {
  detailDialogVisible.value = false
  handleEdit(selectedAccount.value)
}

// 获取账号权限
const getAccountPermissions = (account) => {
  const rolePermissions = {
    '管理员': ['系统管理', '用户管理', '数据管理', '报告查看'],
    '普通用户': ['数据查看', '报告查看'],
    '测试用户': ['测试环境访问', '数据查看']
  }
  return rolePermissions[account.role] || []
}

// 获取账号操作日志
const getAccountLogs = (account) => {
  // 模拟操作日志
  return [
    {
      id: 1,
      action: '用户登录系统',
      time: '2024-08-13 10:30:00'
    },
    {
      id: 2,
      action: '修改个人信息',
      time: '2024-08-12 15:20:00'
    },
    {
      id: 3,
      action: '用户创建',
      time: account.createTime || '2023-01-01 00:00:00'
    }
  ]
}

const handleSubmit = async () => {
  try {
    await accountFormRef.value.validate()
    
    if (editingAccount.value) {
      // 编辑账号
      const index = accountData.value.findIndex(item => item.id === editingAccount.value.id)
      if (index > -1) {
        Object.assign(accountData.value[index], {
          name: accountForm.name,
          email: accountForm.email,
          phone: accountForm.phone,
          role: accountForm.role,
          department: accountForm.department,
          status: accountForm.status
        })
        ElMessage.success(`账号"${accountForm.name}"更新成功`)
      }
    } else {
      // 新建账号
      // 检查用户名是否已存在
      const existingUser = accountData.value.find(user => user.username === accountForm.username)
      if (existingUser) {
        ElMessage.error('用户名已存在，请使用其他用户名')
        return
      }
      
      const newAccount = {
        id: Date.now(),
        username: accountForm.username,
        name: accountForm.name,
        email: accountForm.email,
        phone: accountForm.phone,
        role: accountForm.role,
        department: accountForm.department,
        status: accountForm.status,
        lastLogin: '-',
        createTime: new Date().toLocaleString('zh-CN')
      }
      accountData.value.unshift(newAccount)
      pagination.total++
      ElMessage.success(`账号"${accountForm.name}"创建成功`)
      
      // 记录操作日志
      console.log(`操作日志: 创建用户 ${newAccount.username}(${newAccount.name})`)
    }
    
    dialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  loadAccountData()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  loadAccountData()
}

const loadAccountData = () => {
  loading.value = true
  setTimeout(() => {
    pagination.total = accountData.value.length
    loading.value = false
  }, 500)
}

onMounted(() => {
  loadAccountData()
})
</script>

<style scoped>
.account-management {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.page-header h3 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.search-bar {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.account-table {
  background: white;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

:deep(.el-table th) {
  background: #f8fafc !important;
  color: #374151;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 16px 0;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.password-strength {
  margin-top: 8px;
}

.strength-bar {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s;
}

.strength-fill.weak {
  background: #f56c6c;
}

.strength-fill.medium {
  background: #e6a23c;
}

.strength-fill.strong {
  background: #409eff;
}

.strength-fill.very-strong {
  background: #67c23a;
}

.strength-text {
  font-size: 12px;
  transition: color 0.3s;
}

.strength-text.weak {
  color: #f56c6c;
}

.strength-text.medium {
  color: #e6a23c;
}

.strength-text.strong {
  color: #409eff;
}

.strength-text.very-strong {
  color: #67c23a;
}
</style>
